<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
</head>
<body>

<form action="../sims" style="margin: 10px 0">
    <input name="student_name" placeholder="请输入姓名" value="{{ student_name }}" style="margin-right: 10px"/>
    <input name="student_no" placeholder="请输入学号" value="{{ student_no }}" style="margin-right: 10px"/>
    <button type="submit">查询</button>
</form>
<table border="1px" width="100%" style="border-collapse: collapse;">
    <a href="../sims/add">添加学生</a>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>学号</th>
        <th>操作</th>
    </tr>
    {% for student in students %}
        <tr>
            <td align="center">{{ forloop.counter }} </td>
            <td align="center">{{ student.student_name }} </td>
            <td align="center">{{ student.student_no }} </td>
            <td align="center">
                <a href="../sims/edit/?id={{ student.id }}">
                    编辑
                </a>
                <button onclick="myconfirm(student.id,student.student_name)">删除</button>
                <a href="../sims/delete/?id={{ student.id }}">
                    删除
                </a>
            </td>
        </tr>
    {% endfor %}
</table>

<form action="../map" style="margin: 10px 0">
    <input name="query" placeholder="请输入搜索地址" value="{{ query }}" style="margin-right: 10px"/>
    <input name="region" placeholder="请输入城市" value="{{ region }}" style="margin-right: 10px"/>
    <button type="submit">查询百度地图</button>
</form>
<table border="1px" width="100%" style="border-collapse: collapse;">
    {% for map in maplist %}
        <tr>
            <td align="center">{{ map.name }},{{ map.lan }},{{ map.lon }} </td>
        </tr>
    {% endfor %}
</table>
</body>
<!DOCTYPE HTML>
<html>
<head>
  <title>加载海量点</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <style type="text/css">
    html,body{
        margin:0;
        width:100%;
        height:100%;
        background:#ffffff;
    }
    #map{
        width:100%;
        height:100%;
    }
    #panel {
        position: absolute;
        top:30px;
        left:10px;
        z-index: 999;
        color: #fff;
    }
    #login{
        position:absolute;
        width:300px;
        height:40px;
        left:50%;
        top:50%;
        margin:-40px 0 0 -150px;
    }
    #login input[type=password]{
        width:200px;
        height:30px;
        padding:3px;
        line-height:30px;
        border:1px solid #000;
    }
    #login input[type=submit]{
        width:80px;
        height:38px;
        display:inline-block;
        line-height:38px;
    }
  </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=换成自己ak"></script>
  <script type="text/javascript" src="/jsdemo/data/points-sample-data.js"></script>
</head>
<body>
    <div id="map"></div>
    <script type="text/javascript">

{#var maplost = {{ maplist.toJSON() }}#}
    var map = new BMap.Map("map", {});                         // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.928), 15);     // 初始化地图,设置中心点坐标和地图级别【中心点的值设置为苏州。地图级别值设置越大，地图就放大】
    map.enableScrollWheelZoom();                               //启用滚轮放大缩小
    if (document.createElement('canvas').getContext) {         // 判断当前浏览器是否支持绘制海量点
        var points = [
             {% for map in maplist %}
                 {lat: {{  map.lan}}, lng: {{ map.lon}}, address: "{{  map.name}}"},
    {% endfor %}
        {#{"lat":31.322265852172226,"lng":120.68438002906036,"address":"苏州中心"},#}
		{#{"lat":31.323270951670413,"lng":120.66351733274388,"address":"苏州市工业园区印象城"},#}
		{#{"lat":23.072928527383194,"lng":113.28558235115376,"address":"美罗百货（观前店）"},#}
		{#{"lat":31.326145447116968,"lng":120.72068765133209,"address":"苏州市工业园区圆融时代广场"},#}
		{#{"lat":31.303446751329332,"lng":120.7252852687627,"address":"苏州市工业园区邻瑞广场"},#}
		{#{"lat":31.63212125680224,"lng":120.74279593806872,"address":"诚品生活苏州"},#}
		{#{"lat":31.296203055436283,"lng":120.63059731038081,"address":"苏州市泰华商城"},#}
		{#{"lat":31.288771019970895,"lng":120.67844016353672,"address":"苏州市工业园区双湖广场"},#}
		{#{"lat":31.324684997959398,"lng":120.72068459709335,"address":"苏州市工业园区圆融星座"},#}
		{#{"lat":31.310377509583137,"lng":120.65955077493402,"address":"苏州市万科美好广场"},#}
		{#{"lat":31.32171806722683,"lng":120.67155581959992,"address":"苏州市工业园区天虹（金鸡湖店）"}#}
        ];  // 添加海量点数据
        <!--for (var i = 0; i < data.data.length; i++) {-->
          <!--points.push(new BMap.Point(data.data[i][0], data.data[i][1]));-->
        <!--}-->
        var options = {
            size: BMAP_POINT_SIZE_SMALL,
            shape: BMAP_POINT_SHAPE_STAR,
            color: '#d340c3'
        }
        var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
        pointCollection.addEventListener('click', function (e) {
          alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
        });
        map.addOverlay(pointCollection);  // 添加Overlay
    } else {
        alert('请在chrome、safari、IE8+以上浏览器查看本示例');
    }

  </script>
</body>
</html>

</html>